<template>
  <div>
    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
      <h1 class="text-2xl font-bold text-gray-900">桌台管理</h1>
      <div class="mt-4 md:mt-0">
        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition">
          <i class="fa fa-plus mr-2"></i>添加桌台
        </button>
      </div>
    </div>
    
    <div class="bg-white rounded-lg shadow-md p-6">
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
        <div class="bg-green-50 border border-green-200 rounded-lg p-4 cursor-pointer hover:bg-green-100 transition" v-for="table in tables" :key="table.id">
          <div class="flex justify-between items-center">
            <h3 class="font-medium text-gray-900">{{ table.name }}</h3>
            <span class="px-2 py-0.5 text-xs rounded-full" :class="table.status === '空闲' ? 'bg-green-100 text-green-800' : table.status === '已预订' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'">
              {{ table.status }}
            </span>
          </div>
          <div class="mt-2 text-sm text-gray-500">
            <p>座位数: {{ table.seats }}</p>
            <p v-if="table.status === '已占用' || table.status === '已预订'">预计: {{ table.estimatedTime }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tables = ref([
  {
    id: 1,
    name: 'A01',
    seats: 4,
    status: '空闲',
    estimatedTime: ''
  },
  {
    id: 2,
    name: 'A02',
    seats: 4,
    status: '已占用',
    estimatedTime: '14:30'
  },
  {
    id: 3,
    name: 'A03',
    seats: 4,
    status: '已占用',
    estimatedTime: '15:00'
  },
  {
    id: 4,
    name: 'A04',
    seats: 4,
    status: '空闲',
    estimatedTime: ''
  },
  {
    id: 5,
    name: 'A05',
    seats: 4,
    status: '已预订',
    estimatedTime: '18:00'
  },
  {
    id: 6,
    name: 'B01',
    seats: 6,
    status: '已占用',
    estimatedTime: '14:45'
  },
  {
    id: 7,
    name: 'B02',
    seats: 6,
    status: '空闲',
    estimatedTime: ''
  },
  {
    id: 8,
    name: 'B03',
    seats: 6,
    status: '空闲',
    estimatedTime: ''
  },
  {
    id: 9,
    name: 'B04',
    seats: 6,
    status: '已占用',
    estimatedTime: '15:30'
  },
  {
    id: 10,
    name: 'B05',
    seats: 6,
    status: '已预订',
    estimatedTime: '19:30'
  },
  {
    id: 11,
    name: 'C01',
    seats: 8,
    status: '已占用',
    estimatedTime: '15:15'
  },
  {
    id: 12,
    name: 'C02',
    seats: 8,
    status: '空闲',
    estimatedTime: ''
  }
])
</script>    